<template name="ztabar">
	<view class="cu-bar tabbar bg-black">
		<view :class="{action:true,'text-orange':isActive,'text-gray':!isActive}" @click="tabarClick(0)">
			<view class="cuIcon-homefill"></view>
			{{ home }}
		</view>
		<view :class="{action:true,'text-orange':!isActive,'text-gray':isActive}" @click="tabarClick(1)">
			<view class="cuIcon-similar"></view>
			分类
		</view>
		<view :class="{action:true,'text-orange':!isActive,'text-gray':isActive}" @click="tabarClick(2)">
			<view class="cuIcon-recharge"></view>
			积分
		</view>
		<view :class="{action:true,'text-orange':!isActive,'text-gray':isActive}" @click="tabarClick(3)">
			<view class="cuIcon-cart"></view>
			购物车
		</view>
		<view :class="{action:true,'text-orange':!isActive,'text-gray':isActive}" @click="tabarClick(4)">
			<view class="cuIcon-my"></view>
			我的
		</view>
	</view>
</template>

<script>
export default {
	name: 'ztabar',
	props: {
		home: {
			type: String,
			value: '首页'
		},
		orange:{
			type:String,
			value:''
		},
		gray:{
			type:String,
			value:''
		},
		isActive:{
			type:Array,
			value:[]
		}
	},
	created: function(e) {
	
	},
	methods: {
		tabarClick:function(index){
			var param={};
			param.isActive = this.isActive;
			param.index = index;
			this.$emit("myevent",param)
		}
	}
};
</script>

<style>
.tabbar {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
}
</style>
